<template>
  <div>
    <div class="headHint">活动课程明细</div>
    <el-row>
      <el-col :span="10">
        <el-input v-model="firstKeyWord" style="width:200px" placeholder="请输入搜索内容"/>
        <el-button type="primary" style="margin-left:10px;" @click="handleFilter">搜索</el-button>
      </el-col>
      <el-col :span="2" :offset="12">
        <el-button type="primary" icon="el-icon-plus" @click="addFirstActivity">新增活动</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="detailTableData.slice((firstCurrentPage-1)*firstPageSize,firstCurrentPage*firstPageSize)"
      :default-sort="{prop: 'typeIndex', order: 'ascending'}"
      border
      style="width: 100%;text-align:center;margin-top:20px;">
      <el-table-column :index="typeIndex" type="index" label="编号" align="center"/>
      <el-table-column prop="name" label="课程名称" sortable column-key="name" align="center"/>
      <el-table-column prop="price" label="课程价格" sortable column-key="price" align="center"/>
      <el-table-column
        prop="originalPrice"
        label="课程原价"
        sortable
        column-key="originalPrice"
        align="center"
      />
      <el-table-column
        prop="describe"
        label="规则描述"
        sortable
        column-key="describe"
        min-width="100"
        align="center"
      />
      <el-table-column
        prop="startTime"
        label="活动时间"
        sortable
        column-key="startTime"
        width="300"
        align="center"
      >
        <template slot-scope="scope">
          <div>开始时间：{{ scope.row.startTime }}</div>
          <div>结束时间：{{ scope.row.endTime }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="课程数量" sortable column-key="amount" align="center">
        <template slot-scope="scope">
          <span>共{{ scope.row.amount }}件，该课程暂无订单</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="editWares(scope)">编辑</el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="deleteWares(scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="margin:20px 0;">
      <el-pagination
        :current-page="firstCurrentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="firstPageSize"
        :total="detailTableData.length"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <!-- 编辑/新增弹框 -->
    <el-dialog :visible.sync="waresdialogVisible" :before-close="waresHandleClose" title="提示" width="50%">
      <el-form ref="waresForm" :model="waresForm" :rules="dialogRules" label-width="150px">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="明细类型:" prop="type">
              <span>店铺课程</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="课程名称：" prop="name">
              <el-input v-model="waresForm.name" @focus="showInnerDialog"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="课程数量：" prop="amount">
              <el-input v-model="waresForm.amount" placeholder="请输入课程数量"/>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="课程单价：" prop="price">
              <el-input v-model="waresForm.price" placeholder="请输入课程单价">
                <template slot="prepend">￥</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="开始时间：" prop="startTime">
              <el-date-picker
                v-model="waresForm.startTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间"
                style="width:100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="结束时间：" prop="endTime">
              <el-date-picker
                v-model="waresForm.endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间"
                style="width:100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="提前抢购：" prop="purchase">
              <el-radio-group v-model="waresForm.purchase" size="small">
                <el-radio-button label="是">是</el-radio-button>
                <el-radio-button label="否">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="课程描述：" prop="describe">
              <el-input v-model="waresForm.describe" placeholder="请输入描述"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="减少时间(max):" prop="maxMS">
              <el-input v-model="waresForm.maxMS" placeholder="请输入减少时间">
                <template slot="append">毫秒</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="减少时间(min):" prop="minMS">
              <el-input v-model="waresForm.minMS" placeholder="请输入减少时间">
                <template slot="append">毫秒</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="人数限制：" prop="astrict">
              <el-input v-model="waresForm.astrict" placeholder="请输入限几人"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span v-if="clickBtn==='editWares'" slot="footer" class="dialog-footer">
        <el-button @click="editWaresCancel">取 消</el-button>
        <el-button type="primary" @click="editWaresConfirm">确 定</el-button>
      </span>
      <span v-if="clickBtn==='addWares'" slot="footer" class="dialog-footer">
        <el-button @click="addWaresCancel">取 消</el-button>
        <el-button type="primary" @click="addWaresConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 内层课程弹框 -->
    <el-dialog :visible.sync="waresInnerVisible" append-to-body width="45%" title="课程列表">
      <div>
        <el-input v-model="innerWaresKeyWord" clearable style="width:200px" placeholder="请输入搜索内容"/>
        <el-button type="primary" style="margin-left:10px;" @click="handleFilter">搜索</el-button>
      </div>
      <el-table
        :data="waresTableData.slice((innerCurrentPage-1)*innerPageSize,innerCurrentPage*innerPageSize)"
        :default-sort="{prop: 'waresSerial', order: 'ascending'}"
        border
        style="width: 100%;text-align:center;margin-top:20px;"
      >
        <el-table-column label="选择" align="center" width="80">
          <template slot-scope="scope">
            <el-radio
              v-model="waresRadio"
              :label="scope.row.id"
              @change="getTemplateRow(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程名称" sortable column-key="name" align="center"/>
        <el-table-column
          prop="classify"
          label="课程分类"
          sortable
          column-key="classify"
          align="center"
        />
        <el-table-column
          prop="originalPrice"
          label="价格"
          sortable
          column-key="price"
          align="center"
        >
          <template slot-scope="scope">
            <span>￥{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          sortable
          column-key="unit"
          align="center"
          width="80"
        />
        <el-table-column
          prop="inventory"
          label="库存数量"
          sortable
          column-key="inventory"
          align="center"
        />
        <el-table-column prop="market" label="销售数量" sortable column-key="market" align="center"/>
      </el-table>
      <!-- 课程分页 -->
      <div class="block" style="margin:20px 0;">
        <el-pagination
          :current-page="innerCurrentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="innerPageSize"
          :total="waresTableData.length"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="innerCurrentChange"
          @size-change="innerSizeChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="innerWaresCancel">取 消</el-button>
        <el-button type="primary" @click="innerWaresConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstKeyWord: '',
      detailTableData: [],
      // 分页数据
      firstCurrentPage: 1,
      firstPageSize: 5,
      clickBtn: '',
      waresdialogVisible: false,
      waresInnerVisible: false,
      innerWaresKeyWord: '',
      waresIndex: '0',
      waresForm: {
        name: '',
        amount: '',
        price: '',
        startTime: '',
        endTime: '',
        purchase: '是',
        describe: '',
        maxMS: '',
        minMS: '',
        astrict: ''
      },
      dialogRules: {
        name: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入课程数量', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入课程单价', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请输入开始时间', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '请输入结束时间', trigger: 'blur' }
        ],
        describe: [
          { required: true, message: '请输入课程描述', trigger: 'blur' }
        ],
        maxMS: [
          { required: true, message: '请输入减少时间', trigger: 'blur' }
        ],
        minMS: [
          { required: true, message: '请输入减少时间', trigger: 'blur' }
        ],
        astrict: [
          { required: true, message: '请输入限制人数', trigger: 'blur' }
        ]
      },
      waresTableData: [],
      waresRadio: '0',
      // 内层课程弹框分页
      innerCurrentPage: 1,
      innerPageSize: 5
    }
  },
  methods: {
    // 动态生成表格编号
    typeIndex(index) {
      return index + (this.firstCurrentPage - 1) * this.firstPageSize + 1
    },
    handleFilter() { },
    // 分页设置
    handleCurrentChange(arg) {
      this.firstCurrentPage = arg
    },
    handleSizeChange(arg) {
      this.firstPageSize = arg
    },
    waresHandleClose(done) {
      this.$refs.waresForm.resetFields()
      done()
    },
    // 新增活动事件
    addFirstActivity() {
      this.waresdialogVisible = true
      this.clickBtn = 'addWares'
    },
    // 一级弹框取消
    addWaresCancel() {
      this.$refs.waresForm.resetFields()
      this.waresdialogVisible = false
    },
    // 一级弹框确定
    addWaresConfirm() {
      this.$refs.waresForm.validate((valid) => {
        if (valid) {
          this.waresdialogVisible = false
          this.$refs.waresForm.resetFields()
        } else {
          return false
        }
      })
    },

    // 显示内层弹框
    showInnerDialog() {
      this.waresInnerVisible = true
    },
    // 内层课程分页设置
    innerCurrentChange(arg) {
      this.innerCurrentPage = arg
    },
    innerSizeChange(arg) {
      this.innerPageSize = arg
    },
    getTemplateRow(row) {
      this.waresForm.name = row.name
      this.waresForm.price = row.price
    },
    // 添加课程确定
    innerWaresConfirm() {
      this.waresInnerVisible = false
    },
    // 添加课程取消
    innerWaresCancel() {
      this.waresForm.name = ''
      this.waresForm.price = ''
      this.waresInnerVisible = false
    },
    // 编辑课程信息
    editWares(scope) {
      this.waresdialogVisible = true
      this.clickBtn = 'editWares'
      this.$nextTick(() => {
        this.waresForm.name = scope.row.name
        this.waresForm.amount = scope.row.amount
        this.waresForm.price = scope.row.price
        this.waresForm.startTime = scope.row.startTime
        this.waresForm.endTime = scope.row.endTime
        this.waresForm.purchase = scope.row.purchase
        this.waresForm.describe = scope.row.describe
        this.waresForm.maxMS = scope.row.maxMS
        this.waresForm.minMS = scope.row.minMS
        this.waresForm.astrict = scope.row.astrict
        this.waresIndex = (this.firstCurrentPage - 1) * this.firstPageSize + scope.$index
      })
    },
    editWaresCancel() {
      this.waresdialogVisible = false
      this.$refs.waresForm.resetFields()
    },
    editWaresConfirm() {
      this.$refs.waresForm.validate((valid) => {
        if (valid) {
          this.detailTableData[this.waresIndex].name = this.waresForm.name
          this.detailTableData[this.waresIndex].amount = this.waresForm.amount
          this.detailTableData[this.waresIndex].price = this.waresForm.price
          this.detailTableData[this.waresIndex].originalPrice = this.waresForm.originalPrice
          this.detailTableData[this.waresIndex].startTime = this.waresForm.startTime
          this.detailTableData[this.waresIndex].endTime = this.waresForm.endTime
          this.detailTableData[this.waresIndex].purchase = this.waresForm.purchase
          this.detailTableData[this.waresIndex].describe = this.waresForm.describe
          this.detailTableData[this.waresIndex].maxMS = this.waresForm.maxMS
          this.detailTableData[this.waresIndex].minMS = this.waresForm.minMS
          this.detailTableData[this.waresIndex].astrict = this.waresForm.astrict
          this.waresdialogVisible = false
          this.$refs.waresForm.resetFields()
        } else {
          return false
        }
      })
    },
    // 删除事件
    deleteWares(index) {
      const pageIndex = (this.firstCurrentPage - 1) * this.firstPageSize + index
      this.$confirm('确定要删除该课程吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detailTableData.splice(pageIndex, 1)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.headHint {
  color: rgb(52, 172, 228);
  padding: 10px 30px;
  background: #ebf4ff;
  margin: 20px 0;
  overflow: hidden;
}
</style>

